<template>
  <div class="home">
    <div class="header">
      <div class="part1">
        <ul v-for="(item,index) in sortData" :key="index">
          <li @click="saw(item,index)" :style="{backgroundColor:item.color1}">
            <a href="#">{{item.name}}</a>
          </li>
        </ul>
      </div>
      <div class="part2">
        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
          <div class="carousel-indicators">
            <button
              type="button"
              data-bs-target="#carouselExampleIndicators"
              data-bs-slide-to="0"
              class="active"
              aria-current="true"
              aria-label="Slide 1"
            ></button>
            <button
              type="button"
              data-bs-target="#carouselExampleIndicators"
              data-bs-slide-to="1"
              aria-label="Slide 2"
            ></button>
            <button
              type="button"
              data-bs-target="#carouselExampleIndicators"
              data-bs-slide-to="2"
              aria-label="Slide 3"
            ></button>
            <button
              type="button"
              data-bs-target="#carouselExampleIndicators"
              data-bs-slide-to="3"
              aria-label="Slide 4"
            ></button>
          </div>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="@/assets/car1.jpg" style="height: 500px;" class="d-block w-100" alt="..." />
            </div>
            <div class="carousel-item">
              <img src="@/assets/logo1.jpg" style="height: 500px;" class="d-block w-100" alt="..." />
            </div>
            <div class="carousel-item">
              <img src="@/assets/car2.jpg" style="height: 500px;" class="d-block w-100" alt="..." />
            </div>
            <div class="carousel-item">
              <img src="@/assets/car3.jpg" style="height: 500px;" class="d-block w-100" alt="..." />
            </div>
          </div>
          <button
            class="carousel-control-prev"
            type="button"
            data-bs-target="#carouselExampleIndicators"
            data-bs-slide="prev"
          >
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button
            class="carousel-control-next"
            type="button"
            data-bs-target="#carouselExampleIndicators"
            data-bs-slide="next"
          >
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>
    </div>
    <RMDProducts v-if="show==0"></RMDProducts>
    <PPLBrands v-if="show==1"></PPLBrands>
    <PartsProducts v-if="show==2"></PartsProducts>
    <AnnualRank v-if="show==3"></AnnualRank>

    <div class="footer">
      <a class="text-lg-center" href="#"> CAR SHOP @ 2022 </a>
       <a class="text-lg-center" href="#">Privacy & Legal </a>
        <a class="text-lg-center" href="#"> Vehicle Recalls </a>
         <a class="text-lg-center" href="#"> Contact </a>
         <a class="text-lg-center" href="#"> Careers </a>
         <a class="text-lg-center" href="#"> News </a>
         <a class="text-lg-center" href="#"> LOcation </a>
    </div>
  </div>
</template>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}
.header {
  width: 96%;
  margin: auto;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  .part1 {
    width: 22%;
    height: 550px;
    background-color: #4a5259;
    border-radius: 10px;
    ul {
      list-style: none;
      li {
        width: 100%;
        height: 80px;
        // background-color: rgb(255, 255, 255);
        margin-top: 40px;
        float: right;
        text-align: center;
        border-radius: 20px 0px 0px 20px;
        a {
          font-size: 26px;
          font-weight: 600;
          color: #000000;
          line-height: 90px;
          text-decoration: none;
        }
      }
    }
  }
  .part2 {
    width: 65%;
    height: 500px;
    background-color: #4a5259;
    margin-right: 80px;
    margin-top: 20px;
  }
}
.footer {
  width: 96%;
  margin: auto;
  margin-top: 60px;
  height: 40px;
  a{
  color: #4a5259;
  margin: 10px;
  text-decoration: none;
  }
}
</style>
<script>
import RMDProducts from "@/components/RMDProducts";
import AnnualRank from "@/components/AnnualRank";
import PPLBrands from "@/components/PPLBrands";
import PartsProducts from "@/components/PartsProducts";
export default {
  data() {
    return {
      sortData: [
        { name: "为你推荐", color1: "#ffffff" },
        { name: "热门品牌", color1: "#4A5259" },
        { name: "Model S配件", color1: "#4A5259" },
        { name: "热度排行", color1: "#4A5259" }
      ],
      pic: ["@/assets/car1.jpg", "@/assets/car2.jpg", "@/assets/car3.jpg"],
      show: 0
    };
  },
  methods: {
    saw(item, index) {
      this.sortData.forEach(element => {
        element.color1 = "#4A5259";
      });
      item.color1 = "white";
      this.show = index;
    }
  },
  components: {
    RMDProducts,
    AnnualRank,
    PPLBrands,
    PartsProducts
  }
};
</script>
